簡介：七夕鄰近，才子佳人們又要開始約會(huì)了，為了心愛的她獻(xiàn)上一份不一樣的浪漫。本課程中使用面向接口的編程方式，采用H5+JS+CSS3的混合使用實(shí)現(xiàn)整個(gè)功能。課程當(dāng)中總共分為3個(gè)主題場景圖，多個(gè)精靈圖以及雪碧圖，實(shí)現(xiàn)了靜與動(dòng)的完美結(jié)合，并且由淺入深的將整個(gè)案例拆分講解。
第1章 效果預(yù)覽與介紹
本章展示整個(gè)課程的效果以及課程中的一些注意點(diǎn)
第2章 頁面的搭建與切換
本章講解了整個(gè)效果的結(jié)構(gòu)搭建以及背景圖的滾動(dòng)切換效果，并介紹如何進(jìn)行代碼的封裝。
第3章 小男孩的動(dòng)作的分解
本章講解如何實(shí)現(xiàn)自適應(yīng)布局，小男孩整個(gè)流程的動(dòng)作拆解以及運(yùn)動(dòng)軌跡的處理。
第6章 主題頁面二
本章主要是對第二副圖中動(dòng)畫的講解，頁面是如何布局，開關(guān)門的效果如何實(shí)現(xiàn)，人物坐標(biāo)如何改變，以及燈光和小鳥是如何實(shí)現(xiàn)的。
第7章 主題頁面三
本章主要是對第三副圖中動(dòng)畫的講解，頁面如何布局，星星的閃動(dòng)和河水的流動(dòng)是怎么實(shí)現(xiàn)的，人物的運(yùn)動(dòng)軌跡如何處理，轉(zhuǎn)身的動(dòng)作又是怎么回事，還有l(wèi)ogo的晃動(dòng)以及最后唯美的飄花都是怎么實(shí)現(xiàn)的。
第9章 最終效果
此章為本課程的最后一章，講解了整個(gè)案例效果中的一些注意點(diǎn)及效果的展示